<template>
  <n-grid x-gap="10" y-gap="10" :col="24">
    <n-gi :span="24">
      <div>
        <n-grid x-gap="10" y-gap="10" :col="24">
          <n-gi span="6">
            <div class="custom-choose-item custom-choose-item--small">
              <n-icon size="20">
                <AddOutline />
              </n-icon>
            </div>
          </n-gi>
          <n-gi span="6" v-for="question in shownQuestions" :key="question.id">
            <div
              class="custom-choose-item custom-choose-item--small relative"
              :class="{
                'custom-choose-item--active': isSelected(question.id),
              }"
              @click.stop="handleSelectQuestion(question.id)"
            >
              <n-button
                size="tiny"
                class="absolute z-10 right-1 top-1"
                quaternary
                circle
                v-if="question.description"
                @click.stop="handleClickQuestionDescription(question)"
              >
                <template #icon>
                  <n-icon><InformationCircleOutline /></n-icon>
                </template>
              </n-button>
              <div class="title">
                <span> {{ question.name }} </span>
              </div>
              <div class="title pt-2">
                <span> {{ currencyFormat(question.repairPromoPrice) }} </span>
              </div>
            </div>
          </n-gi>
        </n-grid>
      </div>
      <div class="mt-5 flex justify-between items-end">
        <n-button type="primary" @click.stop="handleAddToCart"> 确认 </n-button>
      </div>
    </n-gi>
  </n-grid>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed, defineExpose } from "vue";
import { debounce, get } from "lodash-es";
import { useModal } from "naive-ui";
import { AddOutline, InformationCircleOutline } from "@vicons/ionicons5";
import { getCheckListByProductId } from "@/api/checkList/checkList.api";
import { currencyFormat } from "@/common/utils/currencyFormatter/index.ts";
import { IChooseQuestionProps } from "./props";

const emits = defineEmits(["selected"]);

const props = withDefaults(defineProps<IChooseQuestionProps>(), {
  productId: "",
  variant: {},
});

const modal = useModal();

const initLoading = ref<boolean>(true);
const calculateLoading = ref<boolean>(false);
const checkList = ref<any>({});
const selectedChcekMap = ref<any>({});

const shownQuestions = computed(() => {
  const questionItems = get(checkList.value, "questionItems") || [];
  return questionItems.filter((item: any) => item.showRepair === "1");
});

const handleGetCheckList = async () => {
  initLoading.value = true;
  try {
    const res = await getCheckListByProductId({
      productId: props.productId,
      showRepair: "1",
    });
    checkList.value = get(res, "result") || [];
    checkList.value?.questionItems.forEach((item: any) => {
      const { id } = item;
      // 默认所有问题都补选中
      selectedChcekMap.value[id] = "0";
    });
  } finally {
    initLoading.value = false;
  }
};

const isSelected = (questionId: string) => {
  return selectedChcekMap.value[questionId] === "1";
};

const handleClickQuestionDescription = (question: any) => {
  modal.create({
    title: question.name,
    preset: "dialog",
    content: question.description,
  });
};

const handleSelectQuestion = debounce(function (questionId: string) {
  if (selectedChcekMap.value[questionId] === "0") {
    selectedChcekMap.value[questionId] = "1";
  } else {
    selectedChcekMap.value[questionId] = "0";
  }
  // TODO: 计算
}, 500);

const handleAddToCart = () => {
  emits("selected", {
    checkList: checkList.value,
    selectedChcekMap: selectedChcekMap.value,
  });
};

const refresh = () => {
  selectedChcekMap.value = {};
  handleGetCheckList();
};

const init = () => {
  handleGetCheckList();
};

onMounted(() => {
  init();
});

defineExpose({
  refresh,
});
</script>
<style lang="scss" scoped></style>
